<template>
    <div>
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
        >
            <el-sub-menu :index="(index+1).toString()" v-for="(item,index) in list" :key="index">
            <template #title>
                <el-icon v-if="index==0"><Paperclip /></el-icon>
                <el-icon v-else-if="index==1"><Scissor /></el-icon>
                <el-icon v-else-if="index==2"><Orange /></el-icon>
                <el-icon v-else><MagicStick /></el-icon>
                <span>{{item.catagory}}</span>
            </template>
            <el-menu-item :index="((index+1)+'-'+(i+1)).toString()" v-for="(list,i) in item.list" :key="i" @click="send(list.cid)">{{ list.name }}</el-menu-item>
            
            </el-sub-menu>

        </el-menu>
    </div>
</template>

<script>
import{Paperclip,Scissor,Orange,MagicStick } from '@element-plus/icons-vue'

import axios from 'axios';
export default {
    methods:{
        send(val){
            this.$emit('handle',val)
        }
    },
    components:{
        Paperclip,
        Scissor,
        Orange,
        MagicStick
    },
    mounted(){
        axios.get("/navlist.json").then(res=>{
            this.list = res.data.navlist
        })
    },
    data(){
        return{
            list:[]
        }
    }
}
</script>
<style scoped>
.el-menu{
    background-color:rgb(248, 248, 215);
}

</style>